<template>
	<view class="global">
		<view class="address" @click="addAdress()">
			
			<view class="addressname">
				{{address.address}}
			</view>
			<view class="addresremark">
				{{address.user}} {{address.phone}}
			</view>
			<view class="displayaddress">
				<view class="ptps">
					平台配送
				</view>
				<view class="songda">
					预计30分钟送达
				</view>
			</view>
			
		</view>
		
		<view class="address">
			<view class="shoplist1" v-for="item in cartlist">
				<view class="shopimg">
					<image :src="item.img" mode=""></image>
				</view>
				<view class="shopinfo">
					<view class="shoptitle">
						{{item.gname}}
					</view>
					<view class="shopprice">
						￥{{item.price}}
					</view>
				</view>
				<view class="">
				</view>
			</view>
			<view class="allcunty">
				小计 <span class="shopprice">{{allcount}}</span>
			</view>
			
		</view>
		<view class="address">
			<view class="displayaddress mb">
				<view class="ptps">
					商家承诺
				</view>
				<view class="songda">
					售后无忧，食无忧
				</view>
			</view>
			<view class="displayaddress mb">
				<view class="ptps">
					隐私保护
				</view>
				<view class="songda">
					售后无忧，号码保护
				</view>
			</view>
			<view class="beizhu">
				<textarea placeholder="请输入备注" v-model="remark"></textarea>
			</view>
			
		</view>
		<view class="tijiaodingdan">
			<button type="primary" @click="submitdingdan()">提交订单</button>
		</view>
	</view>
</template>

<script>
		import $H from '../../utils/request.js';
	export default {
		data() {
			return {
				remark:"",
				business:{},
				user:{},
				allmoney:0,
				count:0,
				cartlist:[],
		address:{},
		addressid:"",
		
				allcount:0
			}
		},
		onLoad(e) {
			console.log(e);
			this.user = uni.getStorageSync("userinfo");
			this.business.id = e.busid
			if(e.addressid){
				this.addressid=e.addressid
			}
			this.getcartlist()

			this.getaddress()
		},

		methods: {
			getaddress(){
				$H.post("address/all?userId="+this.user.id).then(res=>{
					console.log(res);
					
					if(res.data.length>0){
			if(this.addressid == ''){
			this.address=res.data[0];
				
			}else{
				res.data.forEach(el=>{
					if(el.id == this.addressid){
						this.address=el
					}
				})
			}
						
					}
				})
			},
			addAdress(){
				uni.navigateTo({
					url:`/pages/address/address?businessId=${this.business.id}&addressId=${this.addressid}&comment=${this.remark}`
				})
			},
			submitdingdan(){
				$H.post("order/add",{
					carts:this.cartlist,
					comment:this.remark,
					phone:this.user.phone,
					amount:this.count,
					actual:this.allcount,
					businessId:this.business.id,
					userId:this.user.id,
					user:this.user.username,
					address:this.address.address,
				}).then(res=>{
					uni.switchTab({
						url:"/pages/home/home"
					})
					console.log(res)
				})
			},
			getcartlist() {
				$H.post(`cart/all?businessId=${this.business.id}&&userId=${this.user.id}`, {
			
				}, {
					token: true
				}).then(res => {
					console.log(res)
					this.count = 0;
					this.allcount=0
					this.cartlist = res.list
				this.cartlist.forEach(el=>{
					this.count+=el.num
					this.allcount+=el.num*el.price
				})
				})
			
			},
		}
	}
</script>

<style scoped>
	.shopimg image {
		width: 50px;
		height: 50px;
		border-radius: 10px;
		margin-right: 10px;
	}
	
	.shopprice {
		font-size: 14px;
		color: red;
	}
	
	.shoptitle {
		font-size: 14px;
		margin-bottom: 13px;
	}
	
	.shopinfo {
		flex: 1;
		height: 50px;
	}
	
	.shoplist1 {
		width: 100%;
		display: flex;
		align-items: center;
	}
	
	.global {
		width: 100%;
		height: 100%;
		background: #e5e5e5;
		overflow: auto;
		padding: 10px;
		box-sizing: border-box;
	}
	.songda{
		font-size: 14px;
		color: rgb(0, 158, 255);
	}
	.address{
		width: 100%;
		background: #fff;
		padding: 10px;
		margin-bottom: 10px;
		box-sizing: border-box;
	}
	.addressname{
		font-size: 14px;
		font-weight: bold;
		margin-bottom: 10px;
	}
	.ptps{
		font-size: 14px;
		font-weight: bold;
		
	}
	.addresremark{
		font-size: 14px;
		color: #e5e5e5;
		margin-bottom: 20px;
	}
	.displayaddress{
		display: flex;

		width: 100%;
		justify-content: space-between;
	}
	.mb{
				margin-bottom: 15px;
	}
	.allcunty{
		text-align: right;
	}
</style>
